Mastering the Start

The React Engine

How your code travels from a simple HTML file to a dynamic interactive application.

BUILD TO RUN

This isn't just a simple mix of HTML and CSS. To make the engine roar, you must first construct the environment using the terminal commands we mastered. Build the structure first, or the code will have nowhere to live.

If you already know, then you can skip this, scroll down and learn more.

Open Setup Guide
1. index.html PUBLIC 
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>React App</title>
 </head>
 <body>

   <div id="root"></div>

   <script type="module" src="/src/main.jsx"></script>
 </body>
</html>
The Landing Zone. The browser loads this first. It's empty until React finds that #root div.
2. main.jsx ENTRY 
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
The Bridge. It imports React, finds the #root, and renders your App component inside it.
3. App.jsx ROOT 
import Navbar from './Navbar'
import Home from './Home'

function App() {
 return (
  <div class="app">

   <Navbar />
   <main>
     <Home />
   </main>

  </div>
 )}

export default App
The Boss. This is the first "real" component. It decides which major parts (Navbar, Pages) to show.

The "Folder" Architecture

Don't throw everything in src/. Group your UI into dedicated folders so you can find them instantly.

📁 src
  • 📁 components
    • 📁 layout
      • 📄 Header.jsx
      • 📄 Footer.jsx
    • 📁 ui
      • 📄 Button.jsx
      • 📄 Input.jsx
  • 📁 pages
    • 📄 Home.jsx
    • 📄 Contact.jsx

Example: Creating a Header

// Location: src/components/layout/Header.jsx

export default function Header() {
  return (
    <header>
        <h1>My Website</h1>
    </header>
  )
}

! The Import Rule

Now, go to App.jsx and call it:

import Header from './components/layout/Header'